<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/WorkspaceTemplate.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="top">
        
    </ui:define>

    <ui:define name="left">
    </ui:define>

    <ui:define name="right">
       
    </ui:define>

    <ui:define name="content">
        <p:panel header="Advanced Filter">
            <h:form>
                <h:panelGrid columns="3">
                    <h:outputLabel value="Filtered by security role name: "/>
                    <h:selectOneMenu value="#{accountManagerBean.roleNameFilter}">
                        <f:selectItems value="#{userRoleManagerBean.allRoles}" var="item" itemLabel="#{item.roleName}"
                                       itemValue="#{item.roleName}"/>
                    </h:selectOneMenu>
                    <p:commandButton value="Filter" ajax="false" action="#{accountManagerBean.filterByRolename}"/>
                </h:panelGrid>
            </h:form>
        </p:panel>

        <h:form prependId="false">
            <p:messages id="msgs" showDetail="true"/>
            <p:dataTable var="account" value="#{accountManagerBean.allAccounts}" update="msgs"
                         id="manageAccounts" >
                <f:facet name="header">
                    Manage System User Accounts
                </f:facet>

                <p:column headerText="Name" style="width:125px" 
                          filterBy="#{account.staff.fullName}" filterMatchMode="contains">
                    <h:outputText value="#{account.staff.fullName}"/>
                </p:column>

                <p:column headerText="Username" style="width: 93px">
                    <h:outputText value="#{account.username}"/>
                </p:column>

                <p:column headerText="Email" style="width: 206px" 
                          filterBy="#{account.emailAddress}"> 
                    <h:outputText value="#{account.emailAddress}"/>
                </p:column>

                <p:column headerText="Password" >
                    <p:commandButton value="Reset" action="#{accountManagerBean.resetPassword(account.id)}" update="msgs"/>
                </p:column>

                <p:column headerText="Roles" >
                    <p:commandButton  title="Manage" onsuccess ="dlg2.show()" update="displayMulti" ajax="true"
                                      action="#{accountManagerBean.initSelectedRoles(account.id)}" image="ui-icon ui-icon-pencil"/>
                </p:column>

                <p:column headerText="Options">
                    <p:commandButton id="editAcc" title="Edit" action="#{accountManagerBean.editAccountInfo(account.id)}" 
                                     ajax="false" image="ui-icon ui-icon-pencil"/>
                    <p:commandButton id="deleteAcc" action="#{accountManagerBean.selectRole(account.id)}"
                                     oncomplete="dlg3.show()" image="ui-icon ui-icon-trash" title="Delete"/>
                </p:column>

                <p:column headerText="Status" >
                    <h:outputText value="#{account.status}"/>
                </p:column>
            </p:dataTable>

            <p:dialog id="updateRolesDlg" widgetVar="dlg2" header="Update Security Roless"
                      width="600" height="350" showEffect="flip" hideEffect="flip">
                <p:dataTable id="displayMulti" var="sr" value="#{accountManagerBean.allRoles}" 
                             selection="#{accountManagerBean.selectedRoles}"
                             widgetVar="selectRoles">

                    <f:facet name="header">
                        <p:outputPanel>
                            <h:outputText value="Security Roles" />
                            <h:inputText id="globalFilter" onkeyup="selectRoles.filter()" />
                        </p:outputPanel>
                    </f:facet>

                    <p:column selectionMode="multiple" />

                    <p:column headerText="Method Name" 
                              sortBy="#{sr.roleName}"
                              filterBy="#{sr.roleName}">
                        <h:outputText value="#{sr.roleName}"/>
                    </p:column>

                    <p:column headerText="Method Path" 
                              sortBy="#{sr.department}"
                              filterBy="#{sr.department}">
                        <h:outputText value="#{sr.department}"/>
                    </p:column>

                    <f:facet name="footer">
                        <p:commandButton value="Save" 
                                         actionListener="#{accountManagerBean.updateSecurityRoles}" update="left-menu-list displayMulti msgs"
                                         image="ui-icon ui-icon-save" oncomplete="dlg2.hide()"/>
                    </f:facet>

                </p:dataTable>
            </p:dialog>

            <p:confirmDialog widgetVar="dlg3" message="Are you sure to delete the selected account?"
                             showEffect="bounce" hideEffect="explode"
                             header="Confirm to Delete" severity="alert">
                <p:commandButton value="Delete" onstart="dlg3.hide()" ajax="false"
                                 actionListener="#{accountManagerBean.deleteSelectedAccount}"/>
                <p:commandButton value="Cancel" onclick="dlg3.hide()" type="button" />
            </p:confirmDialog>

            <p:ajaxStatus>
                <f:facet name="start">
                    <h:graphicImage value="./../images/ajaxloading.gif"/>
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value=""/>
                </f:facet>
            </p:ajaxStatus>
        </h:form>
    </ui:define>

    <ui:define name="bottom">
       
    </ui:define>

</ui:composition>
